<script setup lang="ts">
</script>

<template>
  <div
    class="good-li pay-li"
  >
    <div class="image-detail">
      <div class="image-content">
        <image
          src="https://img.alicdn.com/imgextra/i1/O1CN01yjw1Xq1HXZy2Zy5yD_!!6000000000085-2-tps-1200-1200.jpg"
          alt=""
        ></image>
      </div>
      <div class="name-sale">
        <div class="name">XXX作品</div>
        <div class="sale">2025.01.01 14:00</div>
      </div>
    </div>
    <div class="price">
      <div class="money">￥40</div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.good-li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 144rpx;
    padding: 0 16rpx;
    border-bottom: 1rpx solid #e4e4e4;
    .image-detail {
        display: flex;
        .image-content {
            position: relative;
            image {
                width: 72rpx;
                height: 72rpx;
                background: #ffffff;
                border: 2rpx solid #707070;
            }
            .like {
                position: absolute;
                top: 0;
                left: 0;
                width: 24rpx;
                height: 24rpx;
                background: #f25a27;
                font-weight: 400;
                font-size: 16rpx;
                color: #ffffff;
                line-height: 24rpx;
                text-align: center;
            }
        }
        .name-sale {
            margin: 0 16rpx;
            .name {
                font-weight: bold;
                font-size: 28rpx;
                color: #222222;
            }
            .sale {
                font-weight: 400;
                font-size: 24rpx;
                color: #6f6f6f;
                line-height: 32rpx;
                margin: 12rpx 0 0;
            }
        }
    }
}
.pay-li {
    height: 120rpx;
    .image-detail {
        .image-content {
            image {
                width: 72rpx;
                height: 72rpx;
            }
        }
    }
}
</style>
